<template>
  <div class="header">
    <div class="logo">
      <span class="pic"></span>
      <!-- <svg-icon className="list-icon" icon-class="list"/> -->
      <a>迎晚部落运营管理后台</a>
    </div>
    <div class="f-nav">
      <FirstNav/>
    </div>
    <div class="h-r">
      <div class="user h-r-f" v-if="userinfo.username">
        <a class="h-r-t" href="javascript:;">{{userinfo.name}}</a>
        
      </div>
      <div class="login-out h-r-f" @click="handleLoginOut">
        <svg-icon className="close-icon" icon-class="close"/>
      </div>
    </div>
  </div>
</template>

<script>
import FirstNav from './firstNav'
import {removeToken} from '@/utils/auth'
export default {
  components: {
    FirstNav
  },
  data() {
    return {
      userinfo: {}
    }
  },
  mounted() {
  },
  methods: {
    loginOut() {
       this.$router.push('/login')
        removeToken()
    },
    handleLoginOut() {
      this.$confirm('当前已登录，确认退出？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.loginOut()
      }).catch(() => {
        console.log('cancel')
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/header';

.logo {
  width: 300px;
  display: flex;
  justify-content: center;
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background-color: #d4d4d4;
  }
  .list-icon {
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    &:hover {
      color: #3296fa;
    }
  }
  .pic {
    margin: 0;
    width: 56px;
    height: 56px;
    margin-right: 28px;
  }
}
.f-nav {
  float: left;
  margin-left: 28px;
}
.h-r {
  // .search-icon {
  //   font-size: 19px;
  //   margin-right: 2px;
  //   font-weight: bold;
  // }
  // .search-val {
  //   font-size: 14px;
  //   line-height: 20px;
  //   height: 20px;
  //   border: none;
  //   border-bottom: 1px solid #fff;
  //   background: none;
  //   color: #fff;
  //   width: 164px;
  //   padding: 0;
  //   &::-webkit-input-placeholder{
  //     color: #a1a1a1;
  //   }
  // }
  .user {
    .user-action {
      transform: translateX(0%);
      position: absolute;
      top: 72px;
      right: -50px;
      left: auto;
    }
  }
}
</style>